<template>
  <div class="adlist">
    <div style="margin-top: 5px; text-align: center;">
      <el-input v-model="wst" placeholder="url地址"></el-input>
      <br/>
      <el-button type="info" @click="totype">{{typename}}</el-button>
      <el-button type="info" @click="queryData">查询</el-button>
    </div>
    <div class="shenti">
      <div>
        <div class="xxlist" v-for="(item, index) in zxItems" :key="index">
          <ul>
            <li>
              <div class="list_z tzgg">
                <div style="float: left; width: 80%" @click="goDetailgg(item.url)"><p>{{item.lev}}{{item.title}}</p>
                </div>
                <div class="price"><span>{{item.urlshow}}</span></div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    Search,
    XButton,
    Divider,
    Cell,
    CellBox,
    Group,
    Scroller,
    Swiper,
    SwiperItem,
    Alert,
    TransferDomDirective as TransferDom
  } from 'vux'

  export default {
    components: {
      Search,
      XButton,
      Divider,
      Cell,
      CellBox,
      Alert,
      Group,
      Scroller, Swiper, SwiperItem
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        name: "aipa",
        zxItems: [],
        wst: '',
        type: '0',
        typename: '极速模式'
      }
    },
    created() {
      this.queryData();
    },
    methods: {
      totype() {
        let self = this;
        if (self.type == '0') {
          self.type = '1';
          self.typename = '完整模式';
        }
        else {
          self.type = '0';
          self.typename = '极速模式';
        }
      },
      goDetailgg: function (url) {
        window.location.href = url;
      },
      queryData: function () {
        let self = this;
        self.zxItems = [];
        let urlget = '';
        if (self.wst == '') {
          //alert('请输入url');
          return;
        }
        if (self.type == '0') {
          urlget = global.aipaApiUrl + 'aipa/getaipaurllistnot?url=' + self.wst;
        }
        else {
          urlget = global.aipaApiUrl + 'aipa/getaipaurllist?url=' + self.wst;
        }
        self.axios.get(urlget).then(function (response) {
          console.log(response);
          self.zxItems = [];
          console.log(response.data.data.length);
          if (response.data.data.length > 0) {
            let d = JSON.parse(response.data.data);
            console.log(d);
            for (let i = 0; i < d.length; i++) {
              let urls = '';
              let lev = '';
              let url = '';
              let title = '';
              if (d[i].hasOwnProperty('lev')) {
                lev = d[i].lev;
              }
              else {
                lev = i;
              }
              if (d[i].hasOwnProperty('url')) {
                url = d[i].url;
                if (d[i].url.length > 40) {
                  urls = d[i].url.substr(0, 40);
                }
                else {
                  urls = d[i].url;
                }
              }
              else {
                url = '';
              }
              if (d[i].hasOwnProperty('title')) {
                if (d[i].title != '') {
                  title = d[i].title;
                }
                else {
                  title = '未检测到title';
                }
              }
              else {
                title = '未检测到title';
              }
              var row = {
                lev: lev,
                url: url,
                title: title,
                urlshow: urls
              }
              self.zxItems.push(row)
            }
          }
        }).catch(function (response) {
          console.log(response);
        });
      }
    }
  }
</script>

<style type="text/css" scoped>
  .no_contant {
    width: 100%;
    font-size: 16px;
    color: #aaa;
    text-align: center;
    line-height: 35px;
    padding: 10px 0;
  }

  .adlist {
    width: 100%;
    height: 100%;
    float: left;
  }

  .adlist .dingbu {
    width: 100%;
    height: 46px;
    float: left;
    position: fixed;
    z-index: 150
  }

  .adlist .dingbu .top {
    width: 100%;
    height: 46px;
    float: left;
    background: #FFFFFF;
    position: relative;
    z-index: 100;
  }

  .adlist .dingbu .top .fh_jt {
    width: 46px;
    height: 46px;
    float: left;
    line-height: 46px;
    background: #3773d2;
  }

  .adlist .dingbu .top .fh_jt img {
    width: 30px;
    height: 30px;
    float: left;
    margin: 6px;
  }

  .adlist .dingbu .top .top_an {
    width: 100%;
    height: 46px;
    float: left;
    line-height: 46px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .adlist .shenti {
    width: 100%;
    height: 100%;
    float: left;
    box-sizing: border-box;
  }

  /*background: #F2F2F2;*/
  .adlist .shenti .xxlist {
    width: 100%;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
    background: #ffffff;
  }

  .adlist .shenti .xxlist:last-child ul li {
    border-bottom: none;
  }

  .adlist .shenti .xxlist ul {
    width: 100%;
    float: left;
  }

  .adlist .shenti .xxlist ul li {
    width: 100%;
    height: 86px;
    float: left;
    position: relative;
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #dadada;
  }

  .adlist .shenti .xxlist ul li .list_z {
    width: 100%;
    height: 80px;
    float: left;
    padding-right: 110px;
    box-sizing: border-box;
  }

  .adlist .shenti .xxlist ul li .list_z.tzgg {
    padding-right: 0px;
  }

  .adlist .shenti .xxlist ul li .list_z p {
    width: 100%;
    height: 46px;
    float: left;
    line-height: 22px;
    display: block;
    font-size: 16px;
    color: #000000;
    margin: 0;
    overflow: hidden;
  }

  .adlist .shenti .xxlist ul li .list_z .price {
    width: 100%;
    height: 40px;
    float: left;
  }

  .adlist .shenti .xxlist ul li .list_z .price span:nth-child(1) {
    height: 20px;
    float: left;
    line-height: 25px;
    color: #A6A6A6;
    font-size: 12px;
  }

  .adlist .shenti .xxlist ul li .list_z .price span:nth-child(2) {
    height: 20px;
    float: right;
    line-height: 25px;
    font-size: 10px;
    color: #A6A6A6;
  }

  .adlist .shenti .xxlist ul li .picture {
    width: 100px;
    height: 66px;
    float: right;
    position: absolute;
    top: 10px;
    right: 0px;
  }

  .adlist .shenti .xxlist ul li .picture img {
    width: 100%;
    height: 100%;
  }

  .adlist .jzgg {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding: 5px;
  }

  .adlist .jzgg img {
    width: 18px;
    height: 18px;
    display: inline-block;
  }

  .adlist .jzgg p {
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    display: inline-block;
    font-size: 12px;
    color: #B0B0B0;
    position: relative;
  }

  .adlist .jzgg p span {
    width: 100px;
    height: 20px;
    line-height: 22px;
    font-size: 12px;
    color: #B0B0B0;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
  }

  .adlist .jzgg1 {
    width: 100%;
    height: 30px;
    float: left;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    color: #B0B0B0;
  }

  .geng_duo {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: none;
    z-index: 100;
    position: fixed;
    bottom: 10px;
    right: 10px;
  }

  .geng_duo img {
    width: 100%;
    height: 100%;
  }

  /*滑动图片区*/
  .datu {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    background: url(../../../static/img/ios.png) no-repeat;
    background-size: 100% 100%;
  }

  .swiper-wrapper {
    width: 100%;
    height: 180px;
    float: left;
  }

  .swiper-slide {
    float: left;
    position: relative;
    width: 100%
  }

  .swiper-slide img {
    width: 100%;
    height: 180px;
  }

  .swiper-slide p {
    display: block;
    margin: 0;
    width: 100%;
    height: 26px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .swiper-slide p span {
    display: block;
    float: right;
    width: 75%;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
    margin-right: 2%;
  }

  /*动态圆点*/
  .pagination {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 26px;
    width: 100%;
    z-index: 50;
  }

  .pagination .swiper-pagination-switch {
    float: left;
    width: 6px;
    height: 6px;
    margin-left: 2%;
    background: #FFFFFF;
    border-radius: 100%;
    margin-top: 10px;
  }

  .pagination .swiper-active-switch {
    width: 6px;
    height: 6px;
    background: #3091e3;
    border-radius: 100%;
  }


</style>
